<template>
  <div class="comment">
    <div>
      <div class="nav">
        <div class="user">
          <img :src="datas.user.head_img|filtersUrl" />
        </div>
        <div class="name">
          <div class="nametitle">{{datas.user.nickname}}</div>
          <div class="nametime" v-if="datas.create_date">
            {{datas.create_date.split('T')[0]}}
            &nbsp;&nbsp;
            {{datas.create_date.split('T')[1].split('.')[0]}}
          </div>
        </div>
        <div class="reply" @click="reply">回复</div>
      </div>
    </div>

    <div>
      <commentson
        v-if="datas.parent"
        :datas="datas.parent"
        :dataparent="dataparent"
        @replys="replys"
        :show="show"
      />
    </div>
    <div class="down" v-if="datas.parent!=null&&datas.parent.parent!=null">
      <div @click="show=true" class="deg" v-if="!show">
        <van-icon name="arrow-down" />
      </div>
      <div @click="show=false" class="up" v-else>
        <van-icon name="arrow-up" />
      </div>
    </div>
    <!-- <div class="content" v-if="replyS">
      回复:
      <span class="blue">{{datas.user.nickname}}</span>
      &nbsp;&nbsp;{{datas.content}}
    </div>-->
    <div class="content">{{datas.content}}</div>
  </div>
</template>

<script>
// import commentson from "../components/commentson";
export default {
  props: ["datas"],
  data() {
    return {
      show: ""
    };
  },
  components: {
    commentson: () => import("../components/commentson")
  },
  computed: {
    dataparent() {
      let numData = 0;
      let datep = this.datas;
      while (datep.parent) {
        // console.log(123);
        numData += 1;
        datep = datep.parent;
      }
      return numData;
    }
  },
  methods: {
    reply() {
      const nicknames = this.datas.user.nickname;
      const usernames = this.datas.user.username;
      // console.log(this.datas);
      this.$emit("reply", {
        id: this.datas.id,
        nickname: nicknames ? nicknames : usernames
      });
    },
    replys(dataId) {
      this.$emit("replys", dataId);
    }
  }
};
</script>

<style lang="less" scoped>
// .blue {
//   color: blue;
// }
.comment {
  border-bottom: 1px solid #888;
  font-size: 12px;
}
/deep/.van-icon {
  font-size: 6.375vw;
}
.nav {
  padding: 30px 15px 0 15px;
  display: flex;
  .user {
    width: 30px;
    height: 30px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
  }
  .name {
    flex: 1;

    padding: 0 0 15px 10px;
    .nametitle {
      padding: 5px;
      font-size: 16px;
    }
    .nametime {
      font-size: 12px;
      color: #ccc;
    }
  }
  .reply {
    text-align: right;
    margin: 15px 15px 0 15px;
    font-size: 12px;
    color: #ccc;
  }
}
.content {
  margin: 20px 0 20px 25px;
  font-size: 16px;
}
.down {
  text-align: center;
  padding: 15px 0 0 0;
  font-size: 14px;
  color: #888;
}
</style>
